<template>
  <div class="category-popup">
    <van-popup
      v-model="showing"
      position="bottom"
      style="border-radius: 4px 4px 0 0"
      v-bind="defaultPopupProps"
      @open="onOpen"
      @closed="onClosed"
    >
      <van-picker
        title="行业分类"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        value-key="industryName"
      >
        <template #confirm>
          <span class="text-button">确定</span>
        </template>
        <template #cancel>
          <span class="text-button">取消</span>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
import popupMixins from "@/mixins/popup";
import enterpriseApi from "@/api/enterprise";
export default {
  name: "CategoryPopup",
  mixins: [popupMixins()],
  data() {
    return {
      columns: [
        {
          values: [],
          defaultIndex: 0,
        },
        // 第二列
        {
          values: [{ code: "", industryName: "全部" }],
          defaultIndex: 0,
        },
        {
          values: [{ code: "", industryName: "全部" }],
          defaultIndex: 0,
        },
        {
          values: [{ code: "", industryName: "全部" }],
          defaultIndex: 0,
        },
      ],
      level1: "",
      level2: "",
      level3: "",
      level4: "",
      selectlevels: {},
      allItem: { code: "", industryName: "全部" },
    };
  },
  watch: {
    //第一列变了 请求第二 {第三，第四 空}
    ///第二变了请求第三 {第四空}
    //第三变了请求第四
    level1(e) {
      this.columns[2].values = [this.allItem];
      this.columns[2].defaultIndex = 0;
      this.columns[3].values = [this.allItem];
      this.columns[3].defaultIndex = 0;
      this.getLevel2(e);
    },
    level2(e) {
      this.columns[3].values = [this.allItem];
      this.columns[3].defaultIndex = 0;
      this.getLevel3(e);
    },
    level3(e) {
      this.getLevel4(e);
    },
    level4(e) {},
  },
  methods: {
    onOpen() {},
    onClosed() {},
    onConfirm(value, index) {
      this.$emit(
        "confirmCategpry",
        {
          industry_one: value[0].code ? value[0].industryName : "",
          industry_two: value[1].code ? value[1].industryName : "",
          industry_three: value[2].code ? value[2].industryName : "",
          industry_four: value[3].code ? value[3].industryName : "",
        },
        value
      );
    },
    onChange(picker, value, index) {
      this.level1 = value[0].code;
      this.level2 = value[1].code;
      this.level3 = value[2].code;
      this.level4 = value[3].code;
    },
    onCancel() {
      this.showing = false;
    },
    async getLevel4(industryCode) {
      let level4 = await enterpriseApi.getCompanyIndustryTypeLevel4({
        industryCode,
        pageSize: 9999,
      });
      level4 = level4.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL4Code,
            industryName: v.industryL4Name,
          };
        })
        .filter((v) => v.code);
      if (!level4.length || !industryCode) {
        this.columns[3].values = [this.allItem];
        this.columns[3].defaultIndex = 0;
        this.level4 = "";
      } else {
        level4.unshift(this.allItem);
        this.columns[3].values = level4;
        this.level4 = level4[0].code;
      }
    },
    async getLevel3(industryCode, first) {
      let level3 = await enterpriseApi.getCompanyIndustryTypeLevel3({
        industryCode,
        pageSize: 9999,
      });
      level3 = level3.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL3Code,
            industryName: v.industryL3Name,
          };
        })
        .filter((v) => v.code);
      if (!level3.length || !industryCode) {
        this.columns[2].values = [this.allItem];
        this.columns[2].defaultIndex = 0;
        this.level3 = "";
      } else {
        level3.unshift(this.allItem);
        this.columns[2].values = level3;
        this.level3 = level3[0].code;
      }

      // if (first) {
      //   this.getLevel4(level3[0].code, first);
      // }
    },
    async getLevel2(industryCode, first) {
      let level2 = await enterpriseApi.getCompanyIndustryTypeLevel2({
        industryCode,
        pageSize: 9999,
      });
      level2 = level2.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL2Code,
            industryName: v.industryL2Name,
          };
        })
        .filter((v) => v.code);
      if (!level2.length || !industryCode) {
        this.columns[1].values = [this.allItem];
        this.columns[1].defaultIndex = 0;
        this.level2 = "";
      } else {
        level2.unshift(this.allItem);
        this.columns[1].values = level2;
        this.level2 = level2[0].code;
      }

      // if (first) {
      //   this.getLevel3(level2[0].code, first);
      // }
    },
    async getLevelList() {
      let level1 = await enterpriseApi.getCompanyIndustryTypeLevel1({
        pageSize: 9999,
      });
      level1 = level1.data.content.map((v) => {
        return {
          ...v,
          code: v.industryL1Code,
          industryName: v.industryL1Name,
        };
      });
      level1.unshift(this.allItem);
      this.columns[0].values = level1;
      this.level1 = level1[0].code;
    },
  },
  created() {
    this.getLevelList();
  },
};
</script>

<style lang="scss" scoped>
.text-button {
  font-size: 15px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #3460d7;
  line-height: 22px;
}
</style>
